<template>
  <!-- 页面头部 -->
  <div>
    <div class="page-header">
      <el-page-header @back="goBack" content="励磁机原理介绍">
        <template #title>
          <span class="header-title">整流发电机虚拟训练软件</span>
        </template>
        <template #extra>
          <div class="header-actions">
            <el-button type="primary" :icon="Printer" @click="handlePrint"
              >打印</el-button
            >
            <el-button :icon="Download" @click="handleDownload"
              >下载PDF</el-button
            >
            <!--            <el-button :icon="Star" @click="handleFavorite">收藏</el-button>-->
          </div>
        </template>
      </el-page-header>
    </div>
    <div class="rotating-rectifier-intro">
      <!-- 标题区域 -->
      <el-card class="intro-header" shadow="never">
        <template #header>
          <div class="card-header">
            <h2>旋转整流器原理介绍</h2>
            <el-tag type="primary">发电机核心组件</el-tag>
          </div>
        </template>
        <p class="intro-summary">
          旋转整流器是十二相整流发电机组的关键部件，负责将励磁机产生的交流电转换为直流电，为发电机转子提供励磁电流。
        </p>
      </el-card>

      <!-- 基本原理介绍 -->
      <el-card class="basic-principle" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>基本原理</h3>
            <el-button type="text" @click="showDetail = !showDetail">
              {{ showDetail ? "收起" : "展开" }}详情
            </el-button>
          </div>
        </template>

        <el-collapse-transition>
          <div v-show="showDetail">
            <p>
              旋转整流器安装在发电机转子上，随转子一同旋转。其主要功能是将副励磁机产生的交流电通过整流电路转换为直流电，为发电机转子提供稳定的励磁电流。
            </p>

            <el-row :gutter="20">
              <el-col :span="12">
                <h4>主要特点：</h4>
                <ul>
                  <li>采用三相桥式整流电路</li>
                  <li>安装在旋转部件上，无刷结构</li>
                  <li>耐高温、抗振动设计</li>
                  <li>高可靠性整流元件</li>
                </ul>
              </el-col>
              <el-col :span="12">
                <h4>技术优势：</h4>
                <ul>
                  <li>减少电刷维护工作量</li>
                  <li>提高系统可靠性</li>
                  <li>适应高速旋转环境</li>
                  <li>整流效率高</li>
                </ul>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-card>

      <!-- 电路原理图 -->
      <el-card class="circuit-diagram" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>电路原理图</h3>
            <el-tag type="success">整流装置电路</el-tag>
          </div>
        </template>

        <div class="diagram-container">
          <p>
            旋转整流器采用三相桥式整流电路，由六个大功率整流二极管组成，将三相交流电转换为直流电。
          </p>

          <!-- 图片位置预留 -->
          <div class="image-placeholder">
            <div class="placeholder-content">
              <el-icon size="40"><Picture /></el-icon>
              <p>整流装置电路图位置</p>
              <small>图6-5 整流装置的电路图将在此处显示</small>
            </div>
          </div>

          <el-divider />

          <h4>电路工作过程：</h4>
          <el-steps :active="stepActive" finish-status="success" align-center>
            <el-step title="交流输入" description="三相交流电输入整流桥" />
            <el-step title="整流过程" description="二极管轮流导通整流" />
            <el-step title="直流输出" description="输出平稳直流电" />
          </el-steps>

          <div class="step-control">
            <el-button @click="prevStep" :disabled="stepActive <= 1"
              >上一步</el-button
            >
            <el-button
              type="primary"
              @click="nextStep"
              :disabled="stepActive >= 3"
              >下一步</el-button
            >
          </div>
        </div>
      </el-card>

      <!-- 三维结构展示 -->
      <el-card class="structure-3d" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>三维结构展示</h3>
            <el-tag type="warning">爆炸视图</el-tag>
          </div>
        </template>

        <div class="structure-container">
          <p>
            通过三维爆炸图展示旋转整流器的内部结构，包括整流桥、散热器、接线端子等组成部分。
          </p>

          <!-- 图片位置预留 -->
          <div class="image-placeholder">
            <div class="placeholder-content">
              <el-icon size="40"><Picture /></el-icon>
              <p>三维爆炸图位置</p>
              <small>图6-8 加定转子的三维爆炸图将在此处显示</small>
            </div>
          </div>

          <el-divider />

          <h4>结构组成：</h4>
          <el-row :gutter="20">
            <el-col
              :span="8"
              v-for="(part, index) in structureParts"
              :key="index"
            >
              <el-card class="part-card" shadow="never">
                <div class="part-icon">
                  <el-icon size="24"><component :is="part.icon" /></el-icon>
                </div>
                <h5>{{ part.name }}</h5>
                <p>{{ part.description }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 技术参数 -->
      <el-card class="technical-specs" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>技术参数</h3>
            <el-tag type="info">性能指标</el-tag>
          </div>
        </template>

        <el-table :data="specsData" stripe style="width: 100%">
          <el-table-column prop="parameter" label="参数名称" width="180" />
          <el-table-column prop="value" label="数值" width="120" />
          <el-table-column prop="unit" label="单位" width="100" />
          <el-table-column prop="description" label="说明" />
        </el-table>
      </el-card>

      <!-- 操作说明 -->
      <el-card class="operation-guide" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>操作与维护</h3>
            <el-tag type="danger">注意事项</el-tag>
          </div>
        </template>

        <el-alert title="安全提示" type="warning" show-icon :closable="false">
          在对旋转整流器进行操作前，请确保发电机已完全停机并断开电源。
        </el-alert>

        <el-collapse v-model="activeOperations" class="operation-collapse">
          <el-collapse-item title="日常检查" name="daily">
            <div class="operation-content">
              <h4>日常检查项目：</h4>
              <ul>
                <li>检查整流器外观是否有异常</li>
                <li>检查接线端子是否松动</li>
                <li>检查散热器是否清洁</li>
                <li>记录运行温度数据</li>
              </ul>
            </div>
          </el-collapse-item>

          <el-collapse-item title="定期维护" name="regular">
            <div class="operation-content">
              <h4>维护周期与内容：</h4>
              <el-timeline>
                <el-timeline-item timestamp="每月" placement="top">
                  <el-card>
                    <h4>月度检查</h4>
                    <p>检查整流二极管性能，测量正向压降和反向电阻</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="每半年" placement="top">
                  <el-card>
                    <h4>半年度维护</h4>
                    <p>清洁整流器表面灰尘，检查所有紧固件</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="每年" placement="top">
                  <el-card>
                    <h4>年度检修</h4>
                    <p>全面检测整流器性能，必要时更换老化元件</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-collapse-item>

          <el-collapse-item title="故障处理" name="troubleshooting">
            <div class="operation-content">
              <h4>常见故障及处理方法：</h4>
              <el-table :data="faultData" style="width: 100%">
                <el-table-column prop="fault" label="故障现象" width="200" />
                <el-table-column prop="cause" label="可能原因" width="200" />
                <el-table-column prop="solution" label="处理方法" />
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  Picture,
  Connection,
  Setting,
  Lightning,
  Printer,
  Download,
} from "@element-plus/icons-vue";

// 响应式数据
const showDetail = ref(true);
const stepActive = ref(1);
const activeOperations = ref(["daily"]);

// 结构部件数据
const structureParts = reactive([
  {
    name: "整流桥",
    icon: Connection,
    description: "由六个大功率整流二极管组成的三相桥式整流电路",
  },
  {
    name: "散热器",
    icon: Setting,
    description: "铝合金散热片，确保整流器在高温环境下稳定工作",
  },
  {
    name: "接线端子",
    icon: Lightning,
    description: "耐高温绝缘材料，可靠连接输入输出电路",
  },
]);

// 技术参数数据
const specsData = reactive([
  {
    parameter: "额定输入电压",
    value: "110",
    unit: "V",
    description: "三相交流输入电压",
  },
  {
    parameter: "额定输出电流",
    value: "50",
    unit: "A",
    description: "最大直流输出电流",
  },
  {
    parameter: "工作频率",
    value: "400",
    unit: "Hz",
    description: "输入交流电频率",
  },
  {
    parameter: "整流效率",
    value: "≥98",
    unit: "%",
    description: "典型工作条件下",
  },
  {
    parameter: "工作温度",
    value: "-40~125",
    unit: "℃",
    description: "环境工作温度范围",
  },
]);

// 故障数据
const faultData = reactive([
  {
    fault: "输出电压不稳定",
    cause: "整流二极管损坏",
    solution: "更换损坏的二极管",
  },
  {
    fault: "整流器过热",
    cause: "散热不良或过载",
    solution: "检查散热系统，减小负载",
  },
  {
    fault: "无输出",
    cause: "输入电路断路或整流桥故障",
    solution: "检查输入电路，测试整流桥",
  },
]);

// 方法
const nextStep = () => {
  if (stepActive.value < 3) {
    stepActive.value++;
  }
};

const prevStep = () => {
  if (stepActive.value > 1) {
    stepActive.value--;
  }
};
</script>

<style scoped>
.rotating-rectifier-intro {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intro-summary {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
}

.image-placeholder {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  padding: 60px 20px;
  text-align: center;
  background-color: #fafafa;
  margin: 20px 0;
  transition: all 0.3s ease;
}

.image-placeholder:hover {
  background-color: #f0f7ff;
  border-color: #409eff;
}

.placeholder-content {
  color: #909399;
}

.placeholder-content .el-icon {
  margin-bottom: 10px;
  color: #c0c4cc;
}

.step-control {
  text-align: center;
  margin-top: 20px;
}

.part-card {
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease;
}

.part-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.part-icon {
  margin-bottom: 10px;
  color: #409eff;
  background-color: #ecf5ff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.operation-collapse {
  margin-top: 20px;
}

.operation-content {
  padding: 10px;
}

.operation-content h4 {
  margin-top: 0;
  color: #303133;
}

/* 卡片样式增强 */
.el-card {
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #ebeef5;
}

.el-card__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .rotating-rectifier-intro {
    padding: 10px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-header h2,
  .card-header h3 {
    margin-bottom: 10px;
  }

  .el-col {
    margin-bottom: 15px;
  }
}

/* 步骤条样式 */
.el-steps {
  margin-top: 20px;
}

/* 表格样式增强 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 折叠面板样式 */
.el-collapse-item__header {
  font-weight: bold;
  font-size: 16px;
}
</style>